<script setup>
import { ref, onMounted, defineComponent, watch } from 'vue'

const props = defineProps({
  value: {
    type: String
  },
  prop: String,
  refName: String,
  // 事件
  select: {
    type: Function,
    default: () => {}
  },
  change: {
    type: Function,
    default: () => {}
  },
  // 插槽
  prefix: Object,
  append: Object,
  prepend: Object,
  suffix: Object,
})

const val = ref(props.value)
watch(() => props.value, newVal => {
  val.value = newVal
})

const emit = defineEmits(['input', 'getRef'])
emit('input', val);

const acRef = ref(null)
onMounted(() => {
  // 抛出当前组件的ref
  props.prop && emit('getRef', { name: props.refName || `${props.prop}Ref`, value: acRef.value })
})

const slotPrefix = defineComponent(props.prefix)
const slotAppend = defineComponent(props.append)
const slotPrepend = defineComponent(props.prepend)
const slotSuffix = defineComponent(props.suffix)
</script>

<template>
  <el-autocomplete
    v-model="val"
    ref="acRef"
    @select="select"
    @change="change"
    v-bind="$attrs"
  >
    <template #prefix v-if="prefix">
      <slotPrefix />
    </template>
    <template #suffix v-if="suffix">
      <slotAppend />
    </template>
    <template #prepend v-if="prepend">
      <slotPrepend />
    </template>
    <template #append v-if="append">
      <slotSuffix />
    </template>
  </el-autocomplete>
</template>

<style lang="scss" scoped>
.el-autocomplete{
  width: 100%;
}
</style>
